<template>
  <div style="overflow-x: hidden">
    <div safe-area-inset-top>
      <van-row type="flex" justify="space-between" align="center" class="page-header">
        <van-col class="page-header-left">
          <h2 class="page-title">{{ $t('nav.ticker') }}</h2>
        </van-col>
        <!-- <van-col class="page-header-right">
          <van-icon
            class="sort-btn"
            name="descending"
            color="@themeColor"
            size="18"
            @click="handleLink('/ticker/rearrange')"
          />
          <van-icon
            name="plus"
            color="@themeColor"
            size="18"
            @click="handleLink('/ticker/subscribe')"
          />
        </van-col> -->
      </van-row>
    </div>
    <van-row class="head" type="flex" justify="space-between" align="center">
      <van-col>{{ $t('asset_name') }}</van-col>
      <van-col>{{ $t('up_down') }}</van-col>
    </van-row>
    <div>
      <template v-if="tickerList.length > 0">
        <van-swipe-cell v-for="item in tickerList" :key="item.id" class="ticker-item" disabled>
          <van-cell>
            <van-row type="flex" justify="space-between" align="center">
              <van-col class="left">
                <van-image :src="item.img_url" />
                <span>{{ item.coin }}</span>
              </van-col>
              <van-col class="right">
                <p>${{ item.price_usd }}</p>
                <p class="" :class="item.change < 0 ? 'hq-red' : 'hq-green'">
                  {{ item.change > 0 ? '+' + item.change + '%' : '' + item.change + '%' }}
                  <img
                    v-if="item.change >= 0"
                    src="../../assets/images/icon-caret-up.png"
                    width="8"
                    height="8"
                  />
                  <img v-else src="../../assets/images/icon-caret-down.png" width="8" height="8" />
                </p>
              </van-col>
            </van-row>
          </van-cell>
          <template #right>
            <van-button square type="danger" :text="$t('actions.del')" />
          </template>
        </van-swipe-cell>
      </template>
      <van-empty v-else :description="$t('empty.default')" />
    </div>
    <ticker-drawer ref="drawer" />
  </div>
</template>

<script>
// import { SwipeCell } from 'vant'
import { mapState, mapActions } from 'vuex'
import TickerDrawer from './components/TickerDrawer'
let timer = null
let isDestroy = false
export default {
  layout: 'navigation',
  components: {
    TickerDrawer
  },
  data () {
    return {
      isLoading: false
    }
  },
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      tickerList: ({ ticker }) => ticker.list
    })
  },
  created () {
    isDestroy = false
    this.loadData()
    // once('hook:beforeDestroy', () => {
    //   isDestroy = true
    //   clearTimeout(timer)
    // })
  },
  methods: {
    ...mapActions({
      getTickerList: 'ticker/getTickerList'
    }),
    loadData () {
      this.getTickerList({
        currency: this.currency.name,
        order: 'price',
        order_type: 'desc'
      }).finally(() => {
        if (isDestroy) {
          return
        }
        clearTimeout(timer)
        timer = setTimeout(() => {
          this.loadData()
        }, 1000)
      })
    },
    handleLink (path) {
      router.push(path)
    }
  }
}
</script>

<style scoped lang="less">
.page-header {
  background-color: #fff;
  height: 46px;
  padding: 0 15px;
  &-right .van-icon {
    display: inline-block;
    vertical-align: middle;
  }
  &-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    line-height: 1;
    color: #333333;
  }
}
/deep/ .ticker-item {
  .left {
    display: flex;
    align-items: center;
  }
  .van-image__img {
    width: 32px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .right {
    text-align: right;
    line-height: 1.2;
  }
}
.hq-red {
  color: #c14b4a;
}
.hq-green {
  color: #47915b;
}
.head {
  padding: 10px 16px;
}
</style>
